<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);

    var d = new Date();
    var datum = d.getFullYear() + '-'
            + ('0' + (d.getMonth() + 1)).slice(-2) + '-'
            + ('0' + d.getDate()).slice(-2);

    var adr = 'main/doGrafu/' + datum;


    function drawChartAjax() {
        $.ajax({
            url:adr,
            type:'POST',
            dataType:'json',
            success:function (data) {
                drawChart(data);
            }
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Dátum');
        data.addColumn('number', 'Počet nájdených udalostí');
        data.addRows(json.length);
        for (var j in json) {
            for (var k in json[j]) {
                data.setValue(parseInt(j), 0, k);
                data.setValue(parseInt(j), 1, json[j][k].v);
            }
        }

        var options = {
            width:280,
            height:200,
            is3D:true,
            legend:{
                position:'top',
                textStyle:{color:'black',
                    fontSize:11
                }
            },
            colors:['blue'],
            backgroundColor:'white',
            chartArea:{left:40, top:15, width:"80%", height:"80%"},
            vAxis:{title:'Počet radarov a hliadok', titleTextStyle:{color:'#000000', fontName:'sans-serif'}}
        }

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        google.visualization.events.addListener(chart, 'ready', $(".draggable").draggable({ grid:[ 40, 40 ], containment:"#playfield", scroll:false}));
    }
</script>

<div id="chart_div"></div>
